<template>
	<view class="login">

		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">登录</block>
		</cu-custom> -->

		<view class="content padding-xl" style="padding: 100upx 50upx 50upx 50upx;">
			<!-- 头部logo -->
			<view class="flex justify-center">
				<image :src="logoImage" mode="widthFix" class="header"></image>
			</view>
			<view class="flex justify-center">
				<h2>艺团</h2>
			</view>
			<view class="flex justify-center text-gray">
				<p>愿你余光皆是美景！</p>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="username" type="text" maxlength="11" placeholder="账户"></wInput>
				<wInput v-model="password" type="password" maxlength="11" placeholder="密码" isShowPass></wInput>
			</view>
			<wButton text="登 录" :rotate="isRotate" @click.native="startLogin"></wButton>


			<view class="flex justify-center margin-top-xl">
				<navigator class="cl-white pointer flex-1" url="/pages/register/index">注册</navigator>
			</view>

		</view>
	</view>
</template>

<script>
	import wInput from '@/components/watch-login/watch-input.vue'
	import wButton from '@/components/watch-login/watch-button.vue'
	let weixinAuthService
	export default {
		data: function() {
			return {
				hasWeixinAuth: false,
				isWeixin: false,

				// logo图片
				logoImage: '../../static/uni-center/defaultAvatarUrl.png',
				pageLoad: false,
				pageData: {},
				notephone: "请输入手机号码",
				notepwd: "请输入密码",

				username: "",
				password: "",
				isRotate: false, //是否加载旋转
			}
		},
		components: {
			wInput,
			wButton
		},
		onLoad: function() {
			// #ifdef APP-PLUS
			plus.oauth.getServices((services) => {
				weixinAuthService = services.find((service) => {
					return service.id === 'weixin'
				})
				if (weixinAuthService) {
					this.hasWeixinAuth = true
				}
			});
			// #endif	

			this.isWeixin = this.app.isWeixin();
		},
		methods: {
			getWeixinCode() {
				return new Promise((resolve, reject) => {
					// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin',
						success(res) {
							console.log(res.code)
							resolve(res.code)
						},
						fail(err) {
							reject(new Error('微信登录失败'))
						}
					})
					// #endif
					// #ifdef APP-PLUS
					weixinAuthService.authorize(function(res) {
						resolve(res.code)
					}, function(err) {
						console.log(err)
						reject(new Error('微信登录失败'))
					});
					// #endif
				})
			},
			loginByWeixin() {
				this.getWeixinCode().then((code) => {
					return uniCloud.callFunction({
						name: 'user-center',
						data: {
							action: 'loginByWeixin',
							params: {
								code,
							}
						}
					})
				}).then((res) => {
					console.log(res)
					// uni.showModal({
					// 	showCancel: false,
					// 	content: JSON.stringify(res.result)
					// })
					if (res.result.code === 0) {
						uni.setStorageSync('uniIdToken', res.result.token)
						uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
						getApp().globalData.ssuserid = res.result.uid
						getApp().globalData.unLogin = false
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}
				}).catch((e) => {
					console.error(e)
					uni.showModal({
						showCancel: false,
						content: '微信登录失败，请稍后再试'
					})
				})
			},


			startLogin() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false
				}
				if (this.username.length == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '账号不能为空'
					})
					return
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码不能少于6位'
					})
					return
				}

				// 网络请求
				const params = {
					username: this.username,
					password: this.password
				}
				this.login(params)
			},
			login(params) {
				if (params) {
					this.isRotate = true
					this.$store.dispatch('login', params).then(res => {
						this.isRotate = false
						// this.$store.dispatch('getInfo')
						// 登录成功跳转到首页
						uni.reLaunch({
							// url: '/pages/index/tiezi',
							url: '/pages/index/index',
						})
					}).catch(() => {
						this.isRotate = false
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		background-color: #ffffff;
		// width: 100vw;
		height: 100vh;
	}

	.main {
		margin-top: 40upx;
	}

	.header {
		// width: 30vw;
		width: 100px;
		height: 100px;
	}
</style>
